<template>
  <view class="screen-page">
    <Navbar title="大屏展示" />
    <!-- 图表预览区域 -->
    <view class="preview-flex">
      <!-- 左侧竖排 -->
      <view class="side-col">
        <view class="side-cell">1</view>
        <view class="side-cell">2</view>
        <view class="side-cell">3</view>
      </view>
      <!-- 中间竖排 -->
      <view class="center-col">
        <!-- 顶部标题和统计 -->
        <view class="center-top">
          <view class="center-title">{{ mainTitle || '标题标题标题' }}</view>
          <view class="center-stats">
            <view class="stat">10<br/><text class="stat-label">今日告警数</text></view>
            <view class="stat stat-custom" :class="'stat-custom1'">{{ selectedTags[0] !== undefined ? tagOptions[selectedTags[0]] : '自定义设置' }}</view>
            <view class="stat stat-custom" :class="'stat-custom2'">{{ selectedTags[1] !== undefined ? tagOptions[selectedTags[1]] : '自定义设置' }}</view>
            <view class="stat">68<br/><text class="stat-label">总告警数</text></view>
          </view>
        </view>
        <!-- 中间超大表 -->
        <view class="center-large">超大表展示区</view>
        <!-- 底部7/8 -->
        <view class="center-bottom">
          <view class="bottom-cell">7</view>
          <view class="bottom-cell">8</view>
        </view>
      </view>
      <!-- 右侧竖排 -->
      <view class="side-col">
        <view class="side-cell">4</view>
        <view class="side-cell">5</view>
        <view class="side-cell">6</view>
      </view>
    </view>
    <!-- 图表配置区域 -->
    <view class="config-area">
      <view class="config-card">
        <view class="config-row">
          <text class="config-label">标题设置</text>
          <input class="config-input" placeholder="输入标题" v-model="mainTitle" />
        </view>
        <view class="config-row">
          <text class="config-label">选择标题下方展示数据（需选择2个）</text>
          <view class="tag-list">
            <view
              v-for="(tag, idx) in tagOptions"
              :key="tag"
              class="tag"
              :class="{
                selected: selectedTags.includes(idx),
                first: selectedTags[0] === idx,
                second: selectedTags[1] === idx
              }"
              @click="toggleTag(idx)"
            >
              {{ tag }}
            </view>
          </view>
        </view>
        <view class="config-row">
          <text class="config-label">超大表选择</text>
          <view class="tab-btns">
            <view class="tab-btn active">区域数据</view>
            <view class="tab-btn">词云数据</view>
          </view>
        </view>
        <view class="config-row">
          <text class="config-label">1-8号图表展示设置</text>
        </view>
        <view class="chart-setting-list">
          <view class="chart-setting-item" v-for="i in 4" :key="i">
            <input class="chart-input" :placeholder="`数据名称${i}`" />
            <view class="chart-type-select">图表类型</view>
            <view class="chart-order-picker" @click="showPicker[i-1] = true">
              <view class="picker-cell">{{ orderList[orderSelected[i-1]] || '序号选择' }}</view>
            </view>
            <tn-picker
              v-model:open="showPicker[i-1]"
              :data="orderList"
              :model-value="orderSelected[i-1]"
              @confirm="val => handleOrderConfirm(val, i-1)"
              label-key="label"
              value-key="value"
              :immediate-change="false"
              :mask="true"
              :show-cancel="true"
              confirm-color="#1ec8e1"
              class="chart-order-tnpicker"
            />
          </view>
        </view>
      </view>
      <view class="export-btn-wrap">
        <button class="export-btn">导出链接</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import Navbar from '@/components/Navbar.vue';
const orderList = [
  { label: '1', value: 0 },
  { label: '2', value: 1 },
  { label: '3', value: 2 },
  { label: '4', value: 3 },
  { label: '5', value: 4 },
  { label: '6', value: 5 },
  { label: '7', value: 6 },
  { label: '8', value: 7 }
];
const orderSelected = ref([0,1,2,3]);
const showPicker = ref([false, false, false, false]);
const mainTitle = ref('');
const tagOptions = [
  '周告警数',
  '月告警数',
  '季度告警数',
  '半年告警数',
  '全年告警数'
];
const selectedTags = ref([]); // 存储已选tag的下标

function toggleTag(idx) {
  const i = selectedTags.value.indexOf(idx);
  if (i > -1) {
    selectedTags.value.splice(i, 1);
  } else if (selectedTags.value.length < 2) {
    selectedTags.value.push(idx);
  } else {
    // 最多只能选2个
    selectedTags.value.splice(0, 1);
    selectedTags.value.push(idx);
  }
}

function handleOrderConfirm(val, idx) {
  // tn-picker confirm 事件返回的是 { label, value }
  orderSelected.value[idx] = val.value;
}
</script>

<style scoped lang="scss">
.screen-page {
  @include page-with-header;
  background: #0a1e4a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.preview-flex {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 520rpx;
  background: #233a6a;
  border-radius: 16rpx;
  margin: 24rpx auto 0 auto;
  overflow: hidden;
}
.side-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  gap: 2rpx;
}
.side-cell {
  flex: 1 1 0;
  background: rgba(255,255,255,0.04);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 0;
}
.center-col {
  flex: 2.5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2rpx;
}
.center-top {
  flex: 0 0 70rpx;
  background: #233a6a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8rpx 0 0 0;
}
.center-title {
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
  margin-bottom: 4rpx;
  text-align: center;
}
.center-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 20rpx;
  width: 90%;
  margin: 0 auto 4rpx auto;
}
.stat {
  text-align: center;
  flex: 1;
}
.stat-label {
  font-size: 18rpx;
  color: #b0cfff;
}
.center-stats .stat-custom1 {
  color: #ffb300;
  font-weight: bold;
}
.center-stats .stat-custom2 {
  color: #1890ff;
  font-weight: bold;
}
.center-large {
  flex: 2.5;
  background: rgba(30,200,225,0.08);
  color: #1ec8e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: bold;
  border-radius: 8rpx;
  margin: 8rpx 0;
}
.center-bottom {
  flex: 0 0 60rpx;
  display: flex;
  flex-direction: row;
  gap: 2rpx;
}
.bottom-cell {
  flex: 1;
  background: rgba(255,255,255,0.04);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  font-weight: 500;
  border-radius: 0;
}
.config-area {
  margin: 32rpx 24rpx 0 24rpx;
}
.config-card {
  background: rgba(255,255,255,0.05);
  border-radius: 16rpx;
  padding: 32rpx 24rpx;
  margin-bottom: 32rpx;
}
.config-row {
  margin-bottom: 24rpx;
}
.config-label {
  color: #b0cfff;
  font-size: 24rpx;
  margin-bottom: 12rpx;
  display: block;
}
.config-input {
  width: 100%;
  height: 56rpx;
  background: rgba(255,255,255,0.08);
  border-radius: 8rpx;
  border: none;
  color: #fff;
  font-size: 26rpx;
  padding: 0 20rpx;
  margin-top: 8rpx;
  box-sizing: border-box;
}
.tag-list {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  width: 100%;
  white-space: nowrap;
}
.tag {
  flex: 1;
  background: #1a3a6a;
  color: #1ec8e1;
  border-radius: 16rpx;
  padding: 8rpx 0;
  font-size: 22rpx;
  cursor: pointer;
  text-align: center;
  transition: background 0.2s, color 0.2s;
  min-width: 0;
  margin: 0;
}
.tag.selected {
  background: #1ec8e1;
  color: #fff;
}
.tag.first {
  background: #ffb300;
  color: #fff;
}
.tag.second {
  background: #1890ff;
  color: #fff;
}
.tab-btns {
  display: flex;
  gap: 16rpx;
}
.tab-btn {
  background: #1a3a6a;
  color: #1ec8e1;
  border-radius: 16rpx;
  padding: 8rpx 32rpx;
  font-size: 22rpx;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.tab-btn.active {
  background: #1ec8e1;
  color: #fff;
}
.chart-setting-list {
  margin-top: 12rpx;
}
.chart-setting-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 16rpx;
}
.chart-input {
  flex: 2;
  height: 48rpx;
  background: rgba(255,255,255,0.08);
  border-radius: 8rpx;
  border: none;
  color: #fff;
  font-size: 24rpx;
  padding: 0 16rpx;
  box-sizing: border-box;
}
.chart-type-select {
  flex: 1;
  color: #1ec8e1;
  font-size: 22rpx;
  text-align: center;
}
.chart-order-picker {
  flex: 1;
}
.picker-cell {
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 24rpx;
  border-radius: 8rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.export-btn-wrap {
  padding: 0 0 60rpx 0;
}
.export-btn {
  width: 100%;
  height: 88rpx;
  background: linear-gradient(135deg, #1ec8e1 0%, #0d8ba3 100%);
  border: none;
  border-radius: 44rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(30, 200, 225, 0.3);
  transition: all 0.3s ease;
}
.export-btn:active {
  transform: scale(0.98);
}
</style>